/**
 * 显示公司的简介
 *      显示申请公司账户的信息：
 *          姓名、id、级别、用户类型
 *       公司信息
 *       简介
 *       供应商品简介
 *       产品需求简介
 *       提交按钮
 */

import React, {Component} from 'react';
import {
  View,
  TextInput,
  Text,
  StyleSheet,
  Dimensions,
  Button,
  Image,
  ScrollView,
  ActivityIndicator,
  TouchableOpacity,
} from 'react-native';

import TopPicture from '../components/TopPicture';
import {_getUserInfo} from '../../api/index';
import {MineImg} from '../../images/index';
import {connect} from 'react-redux';
const {width} = Dimensions.get('window');

class ShowCompanyIntroduction extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isLoading: true,
      result: {},
      imgUri:
        'https://gss0.bdstatic.com/94o3dSag_xI4khGkpoWK1HF6hhy/baike/h%3D550/sign=936136dbbd119313d843ffb555380c10/9825bc315c6034a89efd4098c413495409237688.jpg',
    };
  }
  async getInfo() {
    let responseJson = await _getUserInfo();
    if (
      responseJson.portraitkey === '' ||
      responseJson.portraitkey === null ||
      responseJson.portraitkey === undefined
    ) {
      responseJson.portraitkey = this.state.imgUri;
    }
    this.setState({
      result: responseJson,
      isLoading: false,
    });
  }
  componentDidMount(): void {
    this.getInfo();
  }

  render() {
    // if (this.state.isLoading) {
    //   return (
    //     <View style={{flex: 1, padding: 20}}>
    //       <ActivityIndicator />
    //     </View>
    //   );
    // }
    return (
      <ScrollView style={styles.container}>
        <View style={styles.imgContainer}>
          <Image style={styles.img} source={MineImg.Backround} />
          <TouchableOpacity disabled={true} onPress={() => {}}>
            <Image
              source={{uri: this.props.img}}
              style={styles.insideImg}
            />
          </TouchableOpacity>
        </View>
        <View style={[styles.infoTextContainer, {marginTop: -2}]}>
          <View style={styles.infoMatch}>
            <Text style={styles.keyFont}>用户名</Text>
            <Text style={styles.valueFont}>{this.state.result.nickname}</Text>
          </View>
          {/*<View style={styles.infoMatch}>*/}
          {/*  <Text style={styles.keyFont}>用户ID</Text>*/}
          {/*  <Text style={styles.valueFont}>{this.state.result.uid}</Text>*/}
          {/*</View>*/}
          {/*<View style={styles.infoMatch}>*/}
          {/*  <Text style={styles.keyFont}>用户级别</Text>*/}
          {/*  <Text style={styles.valueFont}>普通用户</Text>*/}
          {/*</View>*/}
          {/*<View style={styles.infoMatch}>*/}
          {/*  <Text style={styles.keyFont}>用户类型</Text>*/}
          {/*  <Text style={styles.valueFont}>公司</Text>*/}
          {/*</View>*/}
        </View>
        <View style={styles.infoTextContainer}>
          <View style={styles.infoMatch}>
            <Text style={styles.keyFont}>公司名称</Text>
            <Text style={styles.valueFont}>{this.state.result.company}</Text>
          </View>
          <View style={styles.infoMatch}>
            <Text style={styles.keyFont}>地址</Text>
            <Text style={styles.valueFont}>{this.state.result.address}</Text>
          </View>
          <View style={styles.infoMatch}>
            <Text style={styles.keyFont}>联系人</Text>
            <Text style={styles.valueFont}>{this.state.result.connector}</Text>
          </View>
          <View style={styles.infoMatch}>
            <Text style={styles.keyFont}>联系电话</Text>
            <Text style={styles.valueFont}>{this.state.result.phone}</Text>
          </View>
        </View>
        <View style={[styles.IntroductionTextContainer, {height: 200}]}>
          <Text style={styles.contentKey}>简介</Text>
          <View style={styles.introductionContentContainer}>
            <Text style={styles.introductionContent} numberOfLines={5}>
              {this.state.result.description}
            </Text>
          </View>
        </View>
        <View style={[styles.IntroductionTextContainer, {height: 400}]}>
          <Text style={styles.contentKey}>供应商品简介</Text>
          <View style={styles.introductionContentContainer}>
            <Text style={styles.introductionContent} numberOfLines={5}>
              {this.state.result.provide}
            </Text>
          </View>
          <Text style={styles.contentKey}>产品需求简介</Text>
          <View style={styles.introductionContentContainer}>
            <Text style={styles.introductionContent} numberOfLines={5}>
              {this.state.result.need}
            </Text>
          </View>
        </View>
        <View style={styles.editButton}>
          <Button
            title={'修  改'}
            onPress={() => {
              this.props.navigation.navigate('EditCompanyInfo', {
                originData: this.state.result,
                callback: newResult => {
                  this.setState({
                    result: newResult,
                  });
                },
              });
            }}
          />
        </View>
      </ScrollView>
    );
  }
}
export default connect(state => ({
  img: state.home.img,
}))(ShowCompanyIntroduction);
const styles = StyleSheet.create({
  container: {
    backgroundColor: '#F3F7FA',
  },
  infoTextContainer: {
    backgroundColor: '#ffffff',
    width: 375,
    height: 150,
    marginTop: 15,
  },
  infoMatch: {
    marginLeft: 30,
    flexDirection: 'row',
    marginTop: 15,
  },
  IntroductionTextContainer: {
    backgroundColor: '#ffffff',
    width: 375,
    marginTop: 15,
  },
  editButton: {
    marginTop: 20,
    width: 375 - 40,
    marginLeft: 20,
    marginBottom: 50,
  },
  keyFont: {
    width: 80,
    color: '#656565',
    fontSize: 15,
  },
  valueFont: {
    marginLeft: 50,
    color: '#989898',
  },
  contentKey: {
    width: 100,
    color: '#656565',
    fontSize: 15,
    marginLeft: 30,
    marginTop: 10,
  },
  introductionContentContainer: {
    marginTop: 10,
    width: 375 - 50,
    height: 150,
    backgroundColor: '#F8F6F9',
    marginLeft: 25,
    borderRadius: 5,
  },
  introductionContent: {
    marginTop: 10,
    width: 375 - 60,
    marginLeft: 9,
    fontSize: 15,
    color: '#989898',
  },
  imgContainer: {
    height: 230,
  },
  img: {
    width: 375,
    height: 230,
    alignItems: 'center',
  },
  insideImg: {
    width: 70,
    height: 70,
    marginTop: -150,
    marginLeft: 375 / 2 - 35,
    borderRadius: 35,
  },
});
